<template>
  <div
    :class="{
      'main-form-box': formFontSize === 'small',
      'main-form-box-large': formFontSize === 'large',
      'main-form-box-no-line': !title,
    }"
  >
    <div v-if="title" class="box-title">{{ title }}</div>
    <Form
      ref="zzForm"
      :model="model"
      :rules="rules"
      :label-width="labelWidth"
      :label-position="labelPosition"
      :inline="inline"
      @submit.prevent
    >
      <Row><slot></slot></Row>
    </Form>
  </div>
</template>

<script>
export default {
  name: 'zzForm',
  components: {},
  emits: [],
  props: {
    model: {
      type: Object,
      default() {
        return {}
      },
    },
    rules: {
      type: Object,
      default() {
        return {}
      },
    },
    title: {
      type: String,
      default: '',
    },
    labelWidth: {
      type: Number,
      default: 80,
    },
    labelPosition: {
      type: String,
      default: 'right',
    },
    inline: {
      type: Boolean,
      default: false,
    },
    readOnly: {
      type: Boolean,
      default: false,
    },
    formFontSize: {
      type: String,
      default: 'small',
    },
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  methods: {
    // 获取当前表单的ref
    getZzFormRef() {
      return this.$refs.zzForm
    },
    // 表单验证，支持async/await
    async validate(valid) {
      const zzForm = this.getZzFormRef()
      if (zzForm) {
        return await zzForm.validate(valid)
      }
    },
    // 表单部分字段校验
    async validateField(prop, valid) {
      const zzForm = this.getZzFormRef()
      if (zzForm) {
        return await zzForm.validateField(prop, valid)
      }
    },
    // 表单重置
    resetFields() {
      const zzForm = this.getZzFormRef()
      if (zzForm) {
        zzForm.resetFields()
      }
    },
  },
}
</script>

<style lang="less" scoped>
/* 表单div父级样式 */
.main-form-box {
  position: relative;
  border: 1px solid #ebebf0;
  border-radius: 5px;
  padding: 10px;
  padding-top: 15px;
  transition: box-shadow 0.3s;

  /* 表单标题样式 */
  .box-title {
    position: absolute;
    top: -10px;
    padding: 0px 10px;
    font-size: 12px;
    font-weight: bold;
    background-color: #fff;
  }

  /* 表单项相关 */
  :deep(.ivu-form-item) {
    margin-bottom: 15px;
    vertical-align: top;
  }
  :deep(.ivu-form-item-label) {
    font-size: 12px;
  }

  /* input相关 */
  /* input主样式 */
  :deep(.ivu-input-small) {
    padding: 0px 7px;
    height: 30px;
    border-radius: 10px;
    font-size: 12px;
  }

  /* input内图标 */
  :deep(.ivu-input-wrapper-small .ivu-input-icon) {
    height: 30px;
    line-height: 30px;
  }

  /* input textarea样式 */
  :deep(textarea.ivu-input) {
    border-radius: 10px;
    font-size: 12px;
  }

  /* 选择框样式 */
  :deep(.ivu-select-selection) {
    border-radius: 10px;
    font-size: 12px;
    height: 30px;
    line-height: 25px;
  }

  /* 选择框内默认字体样式 */
  :deep(.ivu-select-selection .ivu-select-placeholder) {
    line-height: 30px;
    font-size: 12px;
  }

  /* 选择框内选择后的字体样式 */
  :deep(.ivu-select-selection .ivu-select-selected-value) {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
  }

  /* 级联选择器字体样式 */
  :deep(.ivu-cascader-size-small .ivu-cascader-label) {
    line-height: 30px;
    font-size: 13px;
  }

  /* 日期选择器样式 */
  :deep(.ivu-date-picker) {
    width: 100%;
  }

  /* 单选选择器样式 */
  :deep(.ivu-radio-wrapper) {
    font-size: 12px;
  }

  /* 输入或选择框内嵌图标样式 */
  :deep(.ivu-input-wrapper-small .ivu-input-suffix i) {
    line-height: 30px;
  }

  /* 表单验证错误提示样式 */
  :deep(.ivu-form-item-error-tip) {
    font-size: 10px;
    position: absolute;
    top: 100%;
    left: 10px;
    line-height: 1;
    padding-top: 5px;
    color: #e24c27;
  }

  /* 上传组件样式 */
  :deep(.ivu-upload-drag) {
    border-radius: 17px;
  }
}

.main-form-box-large {
  position: relative;
  border: 1px solid #ebebf0;
  border-radius: 5px;
  padding: 10px;
  padding-top: 15px;

  /* 表单标题样式 */
  .box-title {
    position: absolute;
    top: -10px;
    padding: 0px 10px;
    font-size: 14px;
    font-weight: bold;
    background-color: #fff;
  }

  /* 表单项相关 */
  :deep(.ivu-form-item) {
    margin-bottom: 15px;
    vertical-align: top;
  }
  :deep(.ivu-form-item-label) {
    font-size: 13px;
  }

  /* input相关 */
  /* input主样式 */
  :deep(.ivu-input-small) {
    padding: 0px 7px;
    height: 30px;
    border-radius: 10px;
    font-size: 13px;
  }

  /* input内图标 */
  :deep(.ivu-input-wrapper-small .ivu-input-icon) {
    height: 30px;
    line-height: 30px;
  }

  /* input textarea样式 */
  :deep(textarea.ivu-input) {
    border-radius: 10px;
    font-size: 13px;
  }

  /* 选择框样式 */
  :deep(.ivu-select-selection) {
    border-radius: 10px;
    font-size: 13px;
    height: 30px;
    line-height: 25px;
  }

  /* 选择框内默认字体样式 */
  :deep(.ivu-select-selection .ivu-select-placeholder) {
    line-height: 30px;
    font-size: 13px;
  }

  /* 选择框内选择后的字体样式 */
  :deep(.ivu-select-selection .ivu-select-selected-value) {
    height: 30px;
    line-height: 30px;
    font-size: 13px;
  }

  /* 日期选择器样式 */
  :deep(.ivu-date-picker) {
    width: 100%;
  }

  /* 单选选择器样式 */
  :deep(.ivu-radio-wrapper) {
    font-size: 13px;
  }

  /* 输入或选择框内嵌图标样式 */
  :deep(.ivu-input-wrapper-small .ivu-input-suffix i) {
    line-height: 30px;
  }

  /* 上传组件样式 */
  :deep(.ivu-upload-drag) {
    border-radius: 17px;
  }
}

/* 表单div父级无标题时样式 */
.main-form-box-no-line {
  border: 0px;
  padding: 0px;
}

/* 鼠标滑过时显示阴影 */
.main-form-box:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
</style>
